<template>
  <div class="container">
    <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="53px">
      <x-header class="my-header" >服务详情</x-header>
      <p style="text-align: center;padding: 10px 0 0 0">正在完成第{{localtime}}次服务</p>
      <flow>
        <flow-state state="1" :title="$t('下单')" is-done></flow-state>
        <flow-line :tip="$t('进行中')" :is-done="accepted"></flow-line>
        <flow-state state="2" :title="$t('等待护士')" :is-done="accepted"></flow-state>
        <flow-line  v-if="accepted&&!StartSerice" :tip="$t('进行中')" :is-done="StartSerice"></flow-line>
        <flow-line is-done v-if="StartSerice"></flow-line>
        <flow-line v-if="!accepted"></flow-line>
        <flow-state state="3" :title="$t('接受服务')" :is-done="StartSerice"></flow-state>
        <flow-line v-if="StartSerice" :tip="$t('进行中')" :is-done="CompleteByUser"></flow-line>
        <flow-line v-if="!StartSerice" ></flow-line>
        <flow-state  state="4" :title="$t('完成')" :is-done="CompleteByUser"></flow-state>
      </flow>
      <flexbox orient="vertical">
        <flexbox-item><div class="flex-demo">
          <span class="icon"></span>
          <h4 class="item_title">护士姓名：{{nurse.name}}</h4>
          <div class="item_des">护士电话：<a v-if="nurse.tel" :href="'tel:'+nurse.tel">点击拨号</a></div></div></flexbox-item>
      </flexbox>
      <p style="text-indent: 15px;font-size: 17px;margin-bottom: 15px">服务类型：{{orderData.service_name}}</p>
      <div>
        <p style="text-align: center" v-if="noassign">等待客服派单</p>
        <p style="text-align: center" v-if="assigned">等待护士接单</p>
        <p style="text-align: center" v-if="accepted&&!ArriveByUser">等待护士到达约定地点</p>
        <p style="text-align: center" v-if="ArriveByUser&&!CompleteByNurse">等待护士操作</p>
        <p style="text-align: center" v-if="CompleteByNurse">等待用户确认完成</p>
        <!--<el-amap vid="amap" :zoom="zoom" :amap-manager="amapManager" :plugin="plugin" class="amap-demo" :center="center" :events="events">-->
        <!--</el-amap>-->
        <!--<div class="toolbar">-->
        <!--<span v-if="loaded">-->
        <!--location: lng = {{ lng }} lat = {{ lat }}-->
        <!--</span>-->
        <!--<span v-else>正在定位</span>-->
        <!--</div>-->
      </div>
      <group style="position: absolute;bottom: 20px;width: 100%">
        <x-button plain type="primary" disabled v-if="noassign">等待客服派单</x-button>
        <x-button plain type="primary" disabled v-if="assigned">等待护士接单</x-button>
        <x-button plain type="primary" v-if="accepted&&!ArriveByNurse" disabled>确认护士到达</x-button>
        <x-button :gradients="['#1D62F0', '#19D5FD']" v-if="ArriveByNurse&&!ArriveByUser" @click.native="nurseArrive()">确认护士到达</x-button>
        <x-button plain type="primary" disabled v-if="ArriveByUser&&!CompleteByNurse">等待护士操作</x-button>
        <x-button :gradients="['#1D62F0', '#19D5FD']" v-if="CompleteByNurse" @click.native="completeService()">确认服务完成</x-button>
      </group>
    </view-box>
  </div>
</template>

<script>
  import {Flexbox, FlexboxItem,Group, Flow, FlowState, FlowLine,ViewBox,XHeader,  XButton } from 'vux'
  //  import VueAMap from 'vue-amap'
  //  let amapManager = new VueAMap.AMapManager();
  export default {
    data() {
      let self = this;
      return {
          totaltime:0,      //总次数
          localtime:0,   //当前次数
        orderData:'',     //父订单列表中传来的data
        coid:'',           //当前正在进行的子订单的订单号
        status:'',           //子订单的状态
        noassign:true,         //没有派单
        assigned:false,      //已经派单状态
        accepted:false,      //等待接单状态
        ArriveByNurse:false,    //等待护士到达状态
        ArriveByUser:false,     //确认护士到达状态
        StartSerice:false,      //开始服务状态
        CompleteByNurse:false,   //护士确认完成状态
        CompleteByUser:false,     //用户确认完成状态//        zoom: 12,
        nurse:{
          name:'',
          tel:''
        }
//        center: [121.59996, 31.197646],
//        amapManager: amapManager,
//        lng: 0,
//        lat: 0,
//        loaded: false,
//        plugin: [{
//          pName: 'Geolocation',
//          events: {
//            init(o) {
//              // o 是高德地图定位插件实例
//              o.getCurrentPosition((status, result) => {
//                if (result && result.position) {
//                  self.lng = result.position.lng;
//                  self.lat = result.position.lat;
//                  self.center = [self.lng, self.lat];
//                  self.loaded = true;
//                  self.$nextTick();
//                }
//              });
//            }
//          }
//        }]
      };
    },
    mounted(){
      this.orderData=this.$route.query
      this.totaltime=this.orderData.time
      this.getCoid(this.orderData.oid)
    },
    methods:{
      //服务完成
      completeService(){
        let data={
          user_type:2
        }
        this.Ajax('post','/Order/Order/complete/coid/'+this.coid,data,(res)=>{
          if(res.status=='success'){
            this.$router.push({
              path:'/order_eval',
              query:{
                coid:this.coid,
                serviceName:this.orderData.service_name
              }
            })
          }
        })
      },
      //确认护士达到
      nurseArrive(){
        let data={
          user_type:2
        }
        this.Ajax('post','/Order/Order/arrive/coid/'+this.coid,data,(res)=>{
          if(res.status=='success'){
            this.getCoid(this.orderData.oid)
          }
        })
      },
      //获取正在进行订单号
      getCoid(oid){
        let data={
          order_type:1,
          user_type:1
        }
        this.Ajax('post','/Order/order/detail/oid/'+oid,data,(res)=>{
          this.coid=res.openCoid
          this.localtime=res.data.time
          this.getStatus(this.coid)
        })
      },
      //获取订单状态
      getStatus(coid){
        let data={
          order_type:2,
          user_type:1
        }
        this.Ajax('post','/Order/Order/status/coid/'+this.coid,data,(res)=>{
          this.status=res.data
            this.localOrderStatus()
        })
        setTimeout(()=>{
            this.getStatus(coid)
        },5000)
      },
      //判断当前订单状态
      localOrderStatus(){
        let sc=this.status
        for(let key in sc){
          if(key!=='coid'&&key!=='isOK'){
            if(sc[key]==true){
              switch (key){
                case 'isAssign':
                  this.noassign=false
                  this.assigned=true
                  break;
                case 'isAccept':
                  this.noassign=false
                  let data={
                    order_type:2,
                    user_type:1
                  }
                  this.Ajax('post','/Order/order/detail/coid/'+sc.coid,data,(res)=>{
                      this.nurse.name=res.data.nurse_name
                  })
                  this.Ajax('get','/javaapi/anonTel/order/'+sc.coid,{},(res)=>{
                    this.nurse.tel=res.tel
                  })
                  this.accepted=true
                  break;
                case 'isArriveByNurse':
                  this.noassign=false
                  this.ArriveByNurse=true
                  break;
                case 'isArriveByUser':
                  this.noassign=false
                  this.ArriveByUser=true
                  break;
                case 'isStartService':
                  this.noassign=false
                  this.StartSerice=true
                  break;
                case 'isCompleteByNurse':
                  this.noassign=false
                  this.CompleteByNurse=true
                  break
                case 'isCompleteByUser':
                  this.noassign=false
                  this.CompleteByUser=true
              }
            }
          }
        }
      }
    },
    components: {
      Flexbox,
      FlexboxItem,
      Group,
      Flow,
      FlowState,
      FlowLine,
      ViewBox,
      XHeader,
      XButton
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped  lang="stylus" rel="stylesheet/stylus">
  .flex-demo{
    height: 90px;
    background-color: white;
  }
  .my-header {
    background-color: rgb(255, 104, 140);
    position: fixed;
    height: 46px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
  }
  .container{
    background-color: white;
  }
  .icon{
    display: inline-block;
    float:left;
    margin: 10px 5px 15px 20px;
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    border-radius: 50%;
    background-image: url('../mainpage/icons/woman@2x.png');
  }
  .item_title {
    display inline-block
    margin 10px 0 5px 0
    color black
    font-weight bold
  }
  .item_des {
    font-size 16px
    font-weight bold
  }
  /*.amap-demo {*/
  /*height: 200px;*/
  /*}*/</style>
